<template>
  <!--字典表维护-->
  <div>
    <el-row :gutter="20">
      <el-col :span="20" :offset="2">
        <el-card shadow="always">
          <!--一级菜单-->
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
            <el-menu-item :index="item.id" v-for="(item,index) in list" :key="index" @click="tabClick(item)">
              {{item.name}}
            </el-menu-item>
            <el-button type="primary" @click="open" style="float: right" icon="el-icon-circle-plus">新增</el-button>
          </el-menu>


          <!--二级菜单-->
          <div style="display: flex ">
            <el-tabs :tab-position="horizontal" v-model="activeLeft" style="height: 400px;" @tab-click="leftClick">
              <el-tab-pane :label="item.name" :name="item.name" v-for="(item,index) in leftList"
                           :key="index"></el-tab-pane>
            </el-tabs>


            <!--内容-->
            <el-table :data="tableData.list" style="width: 100%;line-height: 23px">
              <el-table-column
                prop="index"
                label="序号"
                width="100">
              </el-table-column>
              <el-table-column prop="cont" :label="tableData.tab" width="180"></el-table-column>
              <el-table-column prop="className" :label="tableData.classTab" v-if="tableData.classTab"
                               width="180"></el-table-column>
              <el-table-column prop="name" label="创建人"></el-table-column>
              <el-table-column prop="createTime" label="创建时间"></el-table-column>
              <el-table-column label="操作">
                <template>
                  <el-button @click="edit" icon="el-icon-edit"></el-button>
                  <el-button @click="delete1" icon="el-icon-delete-solid"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="50"
            layout="total, sizes, prev, pager, next, jumper"
            :total="100">
          </el-pagination>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        horizontal: 'left',
        list: [
          /*一级菜单*/
          {
            name: '病例信息',
            id: '1',
            /*二级菜单*/
            leftList: [
              {
                name: '诊断信息',
                tab: '诊断内容',
                list: [
                  /*二级内容*/
                  {
                    index: 1,
                    cont: '心悸',
                    createTime: '2020-12-13 14：20',
                    name: '小李'
                  },
                  {
                    index: 2,
                    cont: '头疼',
                    createTime: '2020-12-13 10：20',
                    name: '小王'
                  }
                  ,
                  {
                    index: 3,
                    cont: '病毒性感冒',
                    createTime: '2020-12-13 9：20',
                    name: '小王'
                  }
                  ,
                  {
                    index: 4,
                    cont: '腹部积水',
                    createTime: '2020-12-13 15：20',
                    name: '小王'
                  }
                  ,
                  {
                    index: 5,
                    cont: '头疼',
                    createTime: '2020-12-13 11：20',
                    name: '小王'
                  }
                ]
              },
              {
                name: '医嘱信息',
                tab: '医嘱内容',
                list: [
                  {
                    index: 1,
                    cont: '低盐低塘',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 2,
                    cont: '饮食忌辛辣',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 3,
                    cont: '忌受凉风',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 4,
                    cont: '多喝开水',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 5,
                    cont: '忌饮酒',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  }
                ]
              },
              {
                name: '主诉信息',
                classTab: '分类',
                tab: '主诉内容',
                list: [
                  {
                    index: 1,
                    cont: '常用症状',
                    className: '头疼',
                    name: '老李',
                    createTime: '2020-12-12 12：00',
                  },
                  {
                    index: 2,
                    cont: '常用时间',
                    className: '早晨',
                    name: '老李',
                    createTime: '2020-12-12 12：00',
                  },
                  {
                    index: 3,
                    cont: '常用词汇',
                    className: '经常',
                    name: '老李',
                    createTime: '2020-12-12 12：00',
                  },
                  {
                    index: 4,
                    cont: '常用症状',
                    className: '头晕',
                    name: '老李',
                    createTime: '2020-12-12 12：00',
                  },
                  {
                    index: 5,
                    cont: '常用标点',
                    className: ';',
                    name: '老李',
                    createTime: '2020-12-12 12：00',
                  }
                ]
              },
              {
                name: '现病史',
                tab: '现病史',
                list: [
                  {
                    index: 1,
                    cont: '患者昨晨起时发现右侧肢体稍活动不利，当时尚能行走穿衣，未在意。下午出现右肢体活动不利加重，行走不稳，且出现言语不清，与人交流困难。不伴有明显头痛、头晕、恶心、流涎，无吞咽困难，无抽搐，无二便失禁。神志一直清晰。来本院急诊，查头颅CT未发现明显异常，考虑急性脑梗死，予***等治疗后，今以“脑梗死”收入住院。病来患者精神可，纳如常，睡眠安，大小便尚调，体重无明显下降',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 2,
                    cont: '患者于10年起无明显诱因反复出现头晕，持续约半小时在休息后可缓解，不伴有恶心、呕吐，亦无视物旋转及耳鸣，无头痛、眼花，无视物模糊及复视，无胸痛、心悸无气促、发绀，无晕厥，无四肢无力等。曾多次就诊当地医院，测血压均高于140/90mmHg，血压最高达180/105mmHg，诊断为“高血压病”，不规则服用“尼群地平10mg qd”等治疗，血压控制尚可，波动于正常范围。入院前5小时，感持续头晕，头重脚轻，休息后不能缓解，无视物模糊、视物旋转及耳鸣，无恶心、呕吐，无肢体无力，无意识障碍，无二便失禁，无心悸、气促，来我院门诊，查血压达190/100mmHg，拟“高血压病”收住入院。自发病以来，精神、食欲、睡眠欠佳，二便如常，体重无明显变化。',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 3,
                    cont: '患者自22年前受凉后出现咳嗽咯痰，经治而愈（当时具体情况不详）。其后每于冬春天气转冷时易作咳嗽咯痰，晨起时咳嗽较明显，痰量较多，呈白色泡沫样。早年不伴有气急、喉间哮鸣、咯血及盗汗等。每次发作持续约7～10天，经服“消炎药”（具体不详）即可好转。每年发作2～3次，在秋末冬初或春季易发，但日常工作、生活不受影响。',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 4,
                    cont: '暂无',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 5,
                    cont: '暂无',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  }
                ]
              },
              {
                name: '既往史',
                tab: '既往史',
                list: [
                  {
                    index: 1,
                    cont: '待填',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 2,
                    cont: '待填',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 3,
                    cont: '待填',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 4,
                    cont: '待填',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 5,
                    cont: '待填',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  }
                ]
              },
              {
                name: '过敏史',
                tab: '过敏史',
                list: [
                  {
                    index: 1,
                    cont: '过敏史',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 2,
                    cont: '过敏史',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 3,
                    cont: '过敏史',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 4,
                    cont: '过敏史',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 5,
                    cont: '过敏史',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  }
                ]
              },
              {
                name: '个人史',
                tab: '个人史',
                list: [
                  {
                    index: 1,
                    cont: '无',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 2,
                    cont: '无',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 3,
                    cont: '无',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 4,
                    cont: '无',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 5,
                    cont: '无',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  }
                ]
              },
              {
                name: '辅助检查',
                tab: '辅助检查',
                list: [
                  {
                    index: 1,
                    cont: '体察',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 2,
                    cont: '体察',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 3,
                    cont: '体察',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 4,
                    cont: '无',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  },
                  {
                    index: 5,
                    cont: '无',
                    createTime: '2020-12-12 12：00',
                    name: '老李',
                  }
                ]
              }
            ],
          },
          {
            name: '药品信息',
            id: '2',
            leftList: [
              {
                name: '药品分类',
                tab: '处方分类',
                classTab: '分类名称',
                list: [
                  {
                    index: 1,
                    cont: '西/成药处方',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                    className: '西成药'
                  },
                  {
                    index: 2,
                    cont: '中/成药处方',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                    className: '中草药'
                  },
                  {
                    index: 3,
                    cont: '西/成药处方',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                    className: '清热类'
                  },
                  {
                    index: 4,
                    cont: '西/成药处方',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                    className: '注射类'
                  },
                  {
                    index: 5,
                    cont: '西/成药处方',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                    className: '常用药'
                  },
                ]
              },
              {
                name: '药品用法',
                tab: '处方分类',
                classTab: '用法名称',
                list: [
                  {
                    index: 1,
                    className: '注射',
                    cont: '西/成药处方',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }, {
                    index: 2,
                    className: '口服',
                    cont: '中/成药处方',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }
                  , {
                    index: 3,
                    className: '温水吞服',
                    cont: '西/成药处方',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }
                  , {
                    index: 4,
                    className: '煎服',
                    cont: '中/成药处方',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }
                  , {
                    index: 5,
                    className: '湿服',
                    cont: '中/成药处方',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }
                ]
              },
              {
                name: '药品剂型',
                tab: '剂型名称',
                list: [
                  {
                    index: 1,
                    cont: '溶剂',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }, {
                    index: 2,
                    cont: '颗粒',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }, {
                    index: 3,
                    cont: '胶囊',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }, {
                    index: 4,
                    cont: '片剂',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }, {
                    index: 5,
                    cont: '栓剂',
                    createTime: '2020-12-12 12：00',
                    name: '小李',

                  }
                ]
              },
              {
                name: '发票类型',
                tab: '项目名称',
                list: [
                  {
                    index: 1,
                    cont: '注射费',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }, {
                    index: 2,
                    cont: '检查类',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }, {
                    index: 3,
                    cont: '材料费',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  },
                ]
              },
              {
                name: '生产厂家',
                tab: '厂家名称',
                list: [
                  {
                    index: 1,
                    cont: '溶剂',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }, {
                    index: 2,
                    cont: '颗粒',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }, {
                    index: 3,
                    cont: '胶囊',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }, {
                    index: 4,
                    cont: '片剂',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }, {
                    index: 5,
                    cont: '栓剂',
                    createTime: '2020-12-12 12：00',
                    name: '小李',

                  }
                ]
              },
              {
                name: '药品剂型',
                tab: '剂型名称',
                list: [
                  {
                    index: 1,
                    cont: '溶剂',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }, {
                    index: 2,
                    cont: '颗粒',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }, {
                    index: 3,
                    cont: '胶囊',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }, {
                    index: 4,
                    cont: '片剂',
                    createTime: '2020-12-12 12：00',
                    name: '小李',
                  }, {
                    index: 5,
                    cont: '栓剂',
                    createTime: '2020-12-12 12：00',
                    name: '小李',

                  }
                ]
              },
            ],
          },
        ],
        leftList: [],
        tableData: {},
        tabName: '诊断内容',
        activeLeft: '诊断信息'
      };
    },
    mounted() {
      this.leftList = this.list[0].leftList
      this.tableData = this.list[0].leftList[0]
      console.log(this.tableData)

    },
    methods: {
      tabClick(item) {
        this.leftList = item.leftList
        this.tableData = item.leftList[0]
        this.activeIndex = '1'
      },
      leftClick(index) {
        this.leftList.forEach((a, b) => {
          if (a.name == this.activeLeft) {
            this.tableData = a
          }
        })
        console.log(this.tableData)
      },
      open() {
        this.$alert("通知超级管理员", {
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      },
      edit() {
        this.$alert('不可修改')
      },
      delete1() {
        this.$alert('无法删除')
      }
    }
  }
</script>

<style>

</style>
